<%--
  Created by IntelliJ IDEA.
  User: CY
  Date: 2018/1/26
  Time: 13:44
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
    <title>社区排行</title>
    <link rel="icon" href="https://static.jianshukeji.com/highcharts/images/favicon.ico">
    <meta name="viewport" content="width=device-width, initial-scale=0.3, user-scalable=0, minimum-scale=0, maximum-scale=5.0,user-scalable=yes">
    <link rel="stylesheet" href="/css/officialDocument/officialDocument.css">
    <link rel="stylesheet" href="/lib/pagination/style/pagination.css">
    <link rel="stylesheet" href="/lib/laydate/need/laydate.css">
    <link rel="stylesheet" type="text/css" href="/css/street/street.css"/>
    <link rel="stylesheet" type="text/css" href="/css/base.css"/>
    <script src="/lib/jQuery-File-Upload-master/jquery-1.8.3.min.js"></script>
    <script src="/js/base/base.js"></script>
    <script src="/lib/Highcharts-5.0.14/code/highcharts.js"></script>
    <script src="/lib/Highcharts-5.0.14/code/modules/data.js"></script>
    <script src="/lib/pagination/js/jquery.pagination.min.js" type="text/javascript" charset="utf-8"></script>
    <script src="/lib/Highcharts-5.0.14/code/modules/drilldown.js"></script>
    <script src="/js/street/eventRank.js"></script>
    <script src="/lib/laydate/laydate.js"></script>
    <script src="/js/street/checkTheInformation.js"></script>

    <style>
        body{
            height:calc(100% - 20px);
            overflow-y: auto;
        }
        .headEvent{
            height:50px;
            width:100%;
            line-height: 50px;
        }
        .title{
            font-size:20px;
            margin-left:20px;
        }
        .nav{
            float:right;
            overflow: hidden;
            margin-top:-40px;
            margin-right:55px;
        }
        .tab,.timeQuery{
            float:left;
        }
        .tab li{
            float:left;
            font-size: 14px;
            padding: 3px 10px;
            margin-right:10px;
            line-height: 20px;
            background: #e9e9e9;
            border-radius: 3px;
            cursor:pointer;
        }
        .tab .select{
            background: #2F8AE3;
            color:#fff;
        }
        .timeQuery input{
            width:110px;
            height:28px;
            border-radius: 3px;
            margin-right:10px;
        }
        #query{
            display: inline-block;
            font-size: 14px;
            color: #fff;
            padding: 3px 10px;
            margin-right:10px;
            line-height: 20px;
            background: #2F8AE3;
            border-radius: 3px;
            cursor:pointer;
        }
        #back{
            display: inline-block;
            font-size: 14px;
            color: #fff;
            padding: 3px 10px;
            margin-right:10px;
            line-height: 20px;
            background: #2F8AE3;
            border-radius: 3px;
            cursor:pointer;
        }
        .button{
            display: inline-block;
            font-size: 14px;
            color: #fff;
            padding: 3px 10px;
            margin-right:10px;
            line-height: 20px;
            background: #2F8AE3;
            border-radius: 3px;
            cursor:pointer;
            margin-left:20px;
        }

        .section{
            width:90%;
            margin:0 auto;
            /*height:calc(100% - 50px)*/
        }
        .communityRank{
            float:left;
            width:45%;
            /*height:100%;*/
        }
        .userRank{
            float:right;
            width:45%;
            /*height:100%;*/
        }
        .section li{
            height:60px;
            width:100%;
            overflow: hidden;
            line-height: 60px;
        }
        .section li:hover{
            cursor:pointer;
        }
        .left{
            width:40px;
            height:50px;
            float:left;
            line-height: 50px;
        }
        .right{
            width:calc(100% - 40px);
            float:left;
            height:100%;
            position: relative;
        }
        .out{
            width:100%;
            height:10px;
            border-radius: 20px;
            background: #d0edfa;
            margin-top:30px;
            overflow: hidden;
        }
        .in{
            display: inline-block;
            height:100%;
            background: #17aee6;
            border-radius: 20px;
        }
        .detail{
            position:absolute;
            left: 0px;
            top: 0px;
            line-height: 27px;
        }
        .name{
            font-size:16px;
        }
        .num{
            font-size:18px;
            font-weight: bold;
            padding-left:20px;
            color: #d3b548;
        }
        .ranking{
            width:30px;
            height:30px;
            text-align: center;
            line-height: 30px;
            font-size: 16px;
            margin-top:10px;
            border-radius: 50%;
            display: inline-block;
            background: #d0edfa;
            color:#17aee6;
        }
    </style>
</head>
<body>
<div class="main">
    <div class="headEvent">
        <div class="title">
            事件排行榜
        </div>
        <div class="nav">
            <ul class="tab">
                <li class="select" data-type="month">近一个月</li>
                <li data-type="threeMonth">近三个月</li>
                <li data-type="halfYear">近半年</li>
                <li data-type="year">近一年</li>
            </ul>
            <div class="timeQuery">
                <input type="text" class="startTime" onclick="laydate({istime: true, format: 'YYYY-MM-DD '})">
                <input type="text" class="endTime" onclick="laydate({istime: true, format: 'YYYY-MM-DD '})">
                <span id="query">查询</span>
            </div>
            <div style="float: left;display: none" class="back" >
                <span id="back">返回</span>
            </div>
        </div>
    </div>
    <div class="section">
        <div class="communityRank">
            <div class="communityTitle" style="text-align: center;font-size:18px;line-height: 50px;">
                网格排行榜
            </div>
            <div class="communityCon">
                <ul class="communityList">
                    <%--<li>--%>
                    <%--<div class="left"><span><img src="/img/attend/jin.png" alt=""></span></div>--%>
                    <%--<div class="right">--%>
                    <%--<div class="out">--%>
                    <%--<span class="in" style="width:80%;"></span>--%>
                    <%--</div>--%>
                    <%--<div class="detail">--%>
                    <%--<span class="name">石园北一社区</span>--%>
                    <%--<span class="num">140</span>--%>
                    <%--</div>--%>
                    <%--</div>--%>
                    <%--</li>--%>
                    <%--<li>--%>
                    <%--<div class="left"><span class="ranking">2</span></div>--%>
                    <%--<div class="right">--%>
                    <%--<div class="out">--%>
                    <%--<span class="in" style="width:80%;"></span>--%>
                    <%--</div>--%>
                    <%--<div class="detail">--%>
                    <%--<span class="name">石园北一社区</span>--%>
                    <%--<span class="num">140</span>--%>
                    <%--</div>--%>
                    <%--</div>--%>
                    <%--</li>--%>
                </ul>
            </div>
        </div>
        <div class="userRank">
            <div class="userTitle" style="text-align: center;font-size:18px;line-height: 50px;">
                网格员排行榜
            </div>
            <div class="userCon">
                <ul class="userList">

                </ul>
            </div>
        </div>
    </div>
</div>
<%--统计--%>
<div id="container" style="width:100%;  height:calc(100% - 30px);display: none"></div>
<%--列表--%>
<div class="content" style="display: none;padding-top: 60px;">

    <div style="margin-top:-35px;margin-bottom:20px;">
        <button class="button">返回</button>
    </div>
    <div class="pagediv" style="margin: 0 auto;width: 97%;">
        <table>
            <thead>
            <tr>
                <th>序号</th>
                <%--<th>事件类型</th>--%>
                <th>提交人</th>
                <th>提交时间</th>
                <th>事件描述</th>
                <th>所属网格</th>
                <th>操作</th>
            </tr>
            </thead>
            <tbody class="list"></tbody>
        </table>
    </div>
    <div style="margin: 0px auto 0px;height:50px;width: 97%;" class="clearfix">
        <div id="dbgz_page" class="M-box3" style="float: right; margin-top: 13px;display: none">

        </div>
    </div>
</div>
</body>
</html>
